<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校对结果 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6',
                        'error-typo': '#FEF3C7',
                        'error-format': '#DBEAFE',
                        'error-term': '#DCFCE7',
                        'error-repeat': '#FCE7F3',
                        'error-logic': '#FEE2E2'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)',
                        'modal': '0 10px 25px rgba(0, 0, 0, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .error-highlight {
            position: relative;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .error-highlight:hover {
            transform: scale(1.02);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .error-typo {
            background-color: #FEF3C7;
            border: 1px solid #F59E0B;
        }
        
        .error-format {
            background-color: #DBEAFE;
            border: 1px solid #3B82F6;
        }
        
        .error-term {
            background-color: #DCFCE7;
            border: 1px solid #10B981;
        }
        
        .error-repeat {
            background-color: #FCE7F3;
            border: 1px solid #EC4899;
        }
        
        .error-logic {
            background-color: #FEE2E2;
            border: 1px solid #EF4444;
        }
        
        .error-resolved {
            background-color: #F3F4F6;
            border: 1px solid #9CA3AF;
            opacity: 0.6;
        }
        
        .tab-active {
            background-color: #70533B;
            color: white;
        }
        
        .tab-inactive {
            background-color: #F3F4F6;
            color: #6B7280;
        }
        
        .modal-overlay {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-24">
        <!-- 顶部导航栏 -->
        <header id="page-header" class="bg-bg-card border-b border-border-light px-4 py-3">
            <div class="flex items-center justify-between">
                <button id="back-button" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                    <i class="fas fa-arrow-left text-accent"></i>
                </button>
                <h1 id="page-title" class="text-lg font-semibold text-text-primary">校对结果</h1>
                <button id="export-button" class="w-10 h-10 rounded-full bg-accent flex items-center justify-center">
                    <i class="fas fa-download text-white"></i>
                </button>
            </div>
        </header>

        <!-- 文稿信息 -->
        <section id="document-info" class="px-4 py-3 bg-bg-card border-b border-border-light">
            <div class="flex items-center justify-between">
                <div>
                    <h2 id="document-title" class="font-medium text-text-primary">《时光回忆录》</h2>
                    <p id="document-stats" class="text-sm text-text-secondary">共发现 12 处修改建议</p>
                </div>
                <div id="progress-circle" class="w-12 h-12 rounded-full bg-primary flex items-center justify-center">
                    <span id="progress-text" class="text-sm font-semibold text-accent">3/12</span>
                </div>
            </div>
        </section>

        <!-- 错误类型筛选器 -->
        <section id="error-filter" class="px-4 py-3 bg-bg-card border-b border-border-light">
            <div class="flex space-x-2 overflow-x-auto scrollbar-hide">
                <button id="filter-all" class="px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap tab-active">
                    全部 (12)
                </button>
                <button id="filter-typo" class="px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap tab-inactive">
                    错别字 (4)
                </button>
                <button id="filter-format" class="px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap tab-inactive">
                    格式 (3)
                </button>
                <button id="filter-term" class="px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap tab-inactive">
                    术语 (2)
                </button>
                <button id="filter-repeat" class="px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap tab-inactive">
                    重复 (2)
                </button>
                <button id="filter-logic" class="px-3 py-1.5 text-xs font-medium rounded-full whitespace-nowrap tab-inactive">
                    逻辑 (1)
                </button>
            </div>
        </section>

        <!-- 双栏对照区域 -->
        <section id="comparison-section" class="px-4 py-4">
            <div class="grid grid-cols-2 gap-4">
                <!-- 原稿 -->
                <div id="original-column" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <h3 class="text-sm font-medium text-text-primary mb-3 flex items-center">
                        <i class="fas fa-file-alt text-text-secondary mr-2"></i>
                        原稿
                    </h3>
                    <div id="original-content" class="text-sm text-text-primary leading-relaxed max-h-96 overflow-y-auto scrollbar-hide">
                        <p class="mb-3">
                            在那个<span class="error-highlight error-typo" data-error-id="error-1">风清月明</span>的夜晚，我独自走在乡间的小路上。月光洒在地上，形成了一片银色的海洋。远处的山峦在夜色中若隐若现，仿佛是沉睡的巨人。
                        </p>
                        <p class="mb-3">
                            突然，我听到了一阵<span class="error-highlight error-term" data-error-id="error-2">奇异</span>的声音。那声音像是从遥远的地方传来，又像是就在耳边。我停下脚步，仔细聆听着。
                        </p>
                        <p class="mb-3">
                            随着声音越来越近，我看到了一个<span class="error-highlight error-logic" data-error-id="error-3">小小的身影</span>。那是一只受伤的小鸟，它的翅膀似乎受了伤，无法飞翔。我小心翼翼地将它捧在手心，感受到它微弱的心跳。
                        </p>
                        <p class="mb-3">
                            回到家中，我为小鸟包扎了伤口，并给它喂食了一些食物。在接下来的几天里，我每天都会照顾它，看着它一点点地恢复健康。
                        </p>
                        <p class="mb-3">
                            终于有一天，小鸟的翅膀完全康复了。我带着它来到院子里，轻轻地将它放飞。看着它飞向蓝天的<span class="error-highlight error-format" data-error-id="error-4">背影</span>，我的心中充满了喜悦和不舍。
                        </p>
                        <p class="mb-3">
                            这个经历让我明白了生命的可贵，也让我更加珍惜身边的每一个生命。<span class="error-highlight error-repeat" data-error-id="error-5">生命是如此的脆弱，又是如此的坚强</span>。我们应该用爱心去对待每一个生命，让世界变得更加美好。
                        </p>
                    </div>
                </div>

                <!-- 校稿 -->
                <div id="corrected-column" class="bg-bg-card rounded-2xl p-4 shadow-card">
                    <h3 class="text-sm font-medium text-text-primary mb-3 flex items-center">
                        <i class="fas fa-edit text-accent mr-2"></i>
                        校稿
                    </h3>
                    <div id="corrected-content" class="text-sm text-text-primary leading-relaxed max-h-96 overflow-y-auto scrollbar-hide">
                        <p class="mb-3">
                            在那个<span class="error-highlight error-typo" data-error-id="error-1">月明星稀</span>的夜晚，我独自走在乡间的小路上。月光洒在地上，形成了一片银色的海洋。远处的山峦在夜色中若隐若现，仿佛是沉睡的巨人。
                        </p>
                        <p class="mb-3">
                            突然，我听到了一阵<span class="error-highlight error-term" data-error-id="error-2">奇特</span>的声音。那声音像是从遥远的地方传来，又像是就在耳边。我停下脚步，仔细聆听着。
                        </p>
                        <p class="mb-3">
                            随着声音越来越近，我看到了一个<span class="error-highlight error-logic" data-error-id="error-3">小小的身影</span>。那是一只受伤的小鸟，它的翅膀似乎受了伤，无法飞翔。我小心翼翼地将它捧在手心，感受到它微弱的心跳。
                        </p>
                        <p class="mb-3">
                            回到家中，我为小鸟包扎了伤口，并给它喂食了一些食物。在接下来的几天里，我每天都会照顾它，看着它一点点地恢复健康。
                        </p>
                        <p class="mb-3">
                            终于有一天，小鸟的翅膀完全康复了。我带着它来到院子里，轻轻地将它放飞。看着它飞向蓝天的<span class="error-highlight error-format" data-error-id="error-4">背影，</span>我的心中充满了喜悦和不舍。
                        </p>
                        <p class="mb-3">
                            这个经历让我明白了生命的可贵，也让我更加珍惜身边的每一个生命。<span class="error-highlight error-repeat" data-error-id="error-5">生命是如此的脆弱，又是如此的坚强</span>。我们应该用爱心去对待每一个生命，让世界变得更加美好。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 错误列表 -->
        <section id="error-list-section" class="px-4 py-4">
            <h3 class="text-sm font-medium text-text-primary mb-3">错误列表</h3>
            <div id="error-list" class="bg-bg-card rounded-2xl p-4 shadow-card space-y-3">
                <div id="error-item-1" class="flex items-start space-x-3 p-3 rounded-xl bg-error-typo border border-yellow-200">
                    <div class="w-2 h-2 rounded-full bg-yellow-500 mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-yellow-800">错别字</span>
                            <span class="text-xs text-yellow-600">第1段</span>
                        </div>
                        <p class="text-xs text-yellow-700 mb-2">
                            <span class="line-through">风清月明</span> → <span class="font-medium">月明星稀</span>
                        </p>
                        <div class="flex space-x-2">
                            <button class="error-accept-btn px-2 py-1 text-xs bg-yellow-500 text-white rounded-lg" data-error-id="error-1">
                                接受
                            </button>
                            <button class="error-reject-btn px-2 py-1 text-xs bg-gray-300 text-gray-700 rounded-lg" data-error-id="error-1">
                                拒绝
                            </button>
                        </div>
                    </div>
                </div>

                <div id="error-item-2" class="flex items-start space-x-3 p-3 rounded-xl bg-error-term border border-green-200">
                    <div class="w-2 h-2 rounded-full bg-green-500 mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-green-800">术语</span>
                            <span class="text-xs text-green-600">第2段</span>
                        </div>
                        <p class="text-xs text-green-700 mb-2">
                            <span class="line-through">奇异</span> → <span class="font-medium">奇特</span>
                        </p>
                        <div class="flex space-x-2">
                            <button class="error-accept-btn px-2 py-1 text-xs bg-green-500 text-white rounded-lg" data-error-id="error-2">
                                接受
                            </button>
                            <button class="error-reject-btn px-2 py-1 text-xs bg-gray-300 text-gray-700 rounded-lg" data-error-id="error-2">
                                拒绝
                            </button>
                        </div>
                    </div>
                </div>

                <div id="error-item-3" class="flex items-start space-x-3 p-3 rounded-xl bg-error-logic border border-red-200">
                    <div class="w-2 h-2 rounded-full bg-red-500 mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-red-800">逻辑</span>
                            <span class="text-xs text-red-600">第3段</span>
                        </div>
                        <p class="text-xs text-red-700 mb-2">
                            建议："小小的身影"可以改为"小小的鸟儿"，更具体明确
                        </p>
                        <div class="flex space-x-2">
                            <button class="error-accept-btn px-2 py-1 text-xs bg-red-500 text-white rounded-lg" data-error-id="error-3">
                                接受
                            </button>
                            <button class="error-reject-btn px-2 py-1 text-xs bg-gray-300 text-gray-700 rounded-lg" data-error-id="error-3">
                                拒绝
                            </button>
                        </div>
                    </div>
                </div>

                <div id="error-item-4" class="flex items-start space-x-3 p-3 rounded-xl bg-error-format border border-blue-200">
                    <div class="w-2 h-2 rounded-full bg-blue-500 mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-blue-800">格式</span>
                            <span class="text-xs text-blue-600">第5段</span>
                        </div>
                        <p class="text-xs text-blue-700 mb-2">
                            建议：在"背影"后添加逗号，使句子结构更完整
                        </p>
                        <div class="flex space-x-2">
                            <button class="error-accept-btn px-2 py-1 text-xs bg-blue-500 text-white rounded-lg" data-error-id="error-4">
                                接受
                            </button>
                            <button class="error-reject-btn px-2 py-1 text-xs bg-gray-300 text-gray-700 rounded-lg" data-error-id="error-4">
                                拒绝
                            </button>
                        </div>
                    </div>
                </div>

                <div id="error-item-5" class="flex items-start space-x-3 p-3 rounded-xl bg-error-repeat border border-pink-200">
                    <div class="w-2 h-2 rounded-full bg-pink-500 mt-2 flex-shrink-0"></div>
                    <div class="flex-1">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-medium text-pink-800">重复</span>
                            <span class="text-xs text-pink-600">第6段</span>
                        </div>
                        <p class="text-xs text-pink-700 mb-2">
                            建议："生命是如此的脆弱，又是如此的坚强"这句话在文中已出现过，建议修改避免重复
                        </p>
                        <div class="flex space-x-2">
                            <button class="error-accept-btn px-2 py-1 text-xs bg-pink-500 text-white rounded-lg" data-error-id="error-5">
                                接受
                            </button>
                            <button class="error-reject-btn px-2 py-1 text-xs bg-gray-300 text-gray-700 rounded-lg" data-error-id="error-5">
                                拒绝
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 底部工具栏 -->
    <div id="bottom-toolbar" class="fixed bottom-0 left-0 right-0 bg-bg-card border-t border-border-light px-4 py-3 safe-bottom">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <button id="prev-error-btn" class="flex items-center space-x-1 px-3 py-2 bg-primary text-accent rounded-xl">
                    <i class="fas fa-chevron-left text-sm"></i>
                    <span class="text-sm">上一个</span>
                </button>
                <button id="next-error-btn" class="flex items-center space-x-1 px-3 py-2 bg-accent text-white rounded-xl">
                    <span class="text-sm">下一个</span>
                    <i class="fas fa-chevron-right text-sm"></i>
                </button>
            </div>
            <div class="text-sm text-text-secondary">
                已处理 3/12 处错误
            </div>
        </div>
    </div>

    <!-- 错误详情弹窗 -->
    <div id="error-modal" class="fixed inset-0 z-50 hidden">
        <div class="modal-overlay absolute inset-0"></div>
        <div class="relative flex items-end justify-center min-h-screen p-4">
            <div id="error-modal-content" class="bg-bg-card rounded-t-3xl w-full max-h-96 overflow-y-auto">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 id="modal-error-type" class="text-lg font-semibold text-text-primary">错别字</h3>
                        <button id="close-modal-btn" class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
                            <i class="fas fa-times text-accent text-sm"></i>
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <h4 class="text-sm font-medium text-text-secondary mb-2">错误位置</h4>
                            <p id="modal-error-location" class="text-sm text-text-primary">第1段</p>
                        </div>
                        
                        <div>
                            <h4 class="text-sm font-medium text-text-secondary mb-2">错误内容</h4>
                            <p id="modal-error-content" class="text-sm text-text-primary bg-error-typo p-3 rounded-xl">
                                <span class="line-through">风清月明</span>
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="text-sm font-medium text-text-secondary mb-2">修改建议</h4>
                            <p id="modal-error-suggestion" class="text-sm text-text-primary bg-green-50 p-3 rounded-xl">
                                <span class="font-medium text-green-700">月明星稀</span>
                            </p>
                        </div>
                        
                        <div>
                            <h4 class="text-sm font-medium text-text-secondary mb-2">错误说明</h4>
                            <p id="modal-error-description" class="text-sm text-text-primary">
                                "风清月明"虽然也是常用表达，但"月明星稀"更符合古典文学的表达习惯，意境更加优美。
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex space-x-3 mt-6">
                        <button id="modal-accept-btn" class="flex-1 py-3 bg-accent text-white rounded-xl font-medium">
                            接受修改
                        </button>
                        <button id="modal-reject-btn" class="flex-1 py-3 bg-gray-200 text-text-secondary rounded-xl font-medium">
                            拒绝修改
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 导出选项弹窗 -->
    <div id="export-modal" class="fixed inset-0 z-50 hidden">
        <div class="modal-overlay absolute inset-0"></div>
        <div class="relative flex items-center justify-center min-h-screen p-4">
            <div class="bg-bg-card rounded-3xl w-full max-w-sm">
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-text-primary mb-4 text-center">导出文稿</h3>
                    
                    <div class="space-y-3 mb-6">
                        <button id="export-corrected" class="w-full p-4 bg-primary text-accent rounded-xl text-left flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-file-alt text-lg"></i>
                                <span class="font-medium">仅校稿</span>
                            </div>
                            <i class="fas fa-chevron-right"></i>
                        </button>
                        
                        <button id="export-comparison" class="w-full p-4 bg-primary text-accent rounded-xl text-left flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-columns text-lg"></i>
                                <span class="font-medium">原稿与校稿比对</span>
                            </div>
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                    
                    <button id="close-export-modal" class="w-full py-3 bg-gray-200 text-text-secondary rounded-xl font-medium">
                        取消
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 解析URL参数
            function getUrlParams() {
                const params = {};
                const queryString = window.location.search.substring(1);
                const urlParams = new URLSearchParams(queryString);
                
                for(const [key, value] of urlParams.entries()) {
                    params[key] = value;
                }
                return params;
            }

            // 获取文档ID
            const params = getUrlParams();
            const docId = params.doc_id || '1';

            // 模拟加载文档数据
            function loadDocumentData(docId) {
                const mockDocuments = {
                    "1": { title: "《时光回忆录》", totalErrors: 12, processedErrors: 3 },
                    "2": { title: "《技术文档规范》", totalErrors: 8, processedErrors: 0 },
                    "3": { title: "《公司年度报告》", totalErrors: 6, processedErrors: 6 }
                };
                
                const doc = mockDocuments[docId] || mockDocuments["1"];
                
                // 更新页面内容
                document.querySelector('#document-title').textContent = doc.title;
                document.querySelector('#document-stats').textContent = `共发现 ${doc.totalErrors} 处修改建议`;
                document.querySelector('#progress-text').textContent = `${doc.processedErrors}/${doc.totalErrors}`;
                document.querySelector('#bottom-toolbar .text-text-secondary').textContent = 
                    `已处理 ${doc.processedErrors}/${doc.totalErrors} 处错误`;
            }

            // 加载文档数据
            loadDocumentData(docId);

            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                window.location.href = 'P-FILE_MANAGE.html';
            });

            // 导出按钮点击事件
            document.querySelector('#export-button').addEventListener('click', function() {
                document.querySelector('#export-modal').classList.remove('hidden');
            });

            // 关闭导出弹窗
            document.querySelector('#close-export-modal').addEventListener('click', function() {
                document.querySelector('#export-modal').classList.add('hidden');
            });

            // 导出选项点击事件
            document.querySelector('#export-corrected').addEventListener('click', function() {
                console.log('导出仅校稿版本');
                // 模拟导出成功
                alert('校稿导出成功！');
                window.location.href = `P-FILE_MANAGE.html?doc_id=${docId}`;
            });

            document.querySelector('#export-comparison').addEventListener('click', function() {
                console.log('导出原稿与校稿比对版本');
                // 模拟导出成功
                alert('比对版本导出成功！');
                window.location.href = `P-FILE_MANAGE.html?doc_id=${docId}`;
            });

            // 错误类型筛选
            const filterButtons = document.querySelectorAll('[id^="filter-"]');
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 重置所有按钮样式
                    filterButtons.forEach(btn => {
                        btn.classList.remove('tab-active');
                        btn.classList.add('tab-inactive');
                    });
                    
                    // 设置当前按钮为激活状态
                    this.classList.remove('tab-inactive');
                    this.classList.add('tab-active');
                    
                    // 筛选逻辑
                    const filterType = this.id.replace('filter-', '');
                    filterErrors(filterType);
                });
            });

            // 筛选错误函数
            function filterErrors(type) {
                const errorHighlights = document.querySelectorAll('.error-highlight');
                
                errorHighlights.forEach(highlight => {
                    if (type === 'all') {
                        highlight.style.display = 'inline';
                    } else {
                        const errorClass = `error-${type}`;
                        if (highlight.classList.contains(errorClass)) {
                            highlight.style.display = 'inline';
                        } else {
                            highlight.style.display = 'none';
                        }
                    }
                });
            }

            // 错误高亮点击事件
            const errorHighlights = document.querySelectorAll('.error-highlight');
            errorHighlights.forEach(highlight => {
                highlight.addEventListener('click', function() {
                    const errorId = this.dataset.errorId;
                    showErrorModal(errorId);
                });
            });

            // 显示错误详情弹窗
            function showErrorModal(errorId) {
                const errorData = {
                    "error-1": {
                        type: "错别字",
                        location: "第1段",
                        content: "风清月明",
                        suggestion: "月明星稀",
                        description: "\"风清月明\"虽然也是常用表达，但\"月明星稀\"更符合古典文学的表达习惯，意境更加优美。"
                    },
                    "error-2": {
                        type: "术语",
                        location: "第2段",
                        content: "奇异",
                        suggestion: "奇特",
                        description: "\"奇特\"比\"奇异\"更常用于文学描写，表达独特而有趣的意味。"
                    },
                    "error-3": {
                        type: "逻辑",
                        location: "第3段",
                        content: "小小的身影",
                        suggestion: "小小的鸟儿",
                        description: "\"小小的身影\"比较笼统，改为\"小小的鸟儿\"更具体明确，符合上下文语境。"
                    },
                    "error-4": {
                        type: "格式",
                        location: "第5段",
                        content: "背影",
                        suggestion: "背影，",
                        description: "在\"背影\"后添加逗号，使句子结构更完整，语气更自然。"
                    },
                    "error-5": {
                        type: "重复",
                        location: "第6段",
                        content: "生命是如此的脆弱，又是如此的坚强",
                        suggestion: "生命既脆弱又坚强",
                        description: "这句话在文中已出现过，建议修改为更简洁的表达，避免内容冗余。"
                    }
                };

                const error = errorData[errorId];
                if (error) {
                    document.querySelector('#modal-error-type').textContent = error.type;
                    document.querySelector('#modal-error-location').textContent = error.location;
                    document.querySelector('#modal-error-content').innerHTML = `<span class="line-through">${error.content}</span>`;
                    document.querySelector('#modal-error-suggestion').innerHTML = `<span class="font-medium text-green-700">${error.suggestion}</span>`;
                    document.querySelector('#modal-error-description').textContent = error.description;
                    
                    // 存储当前错误ID
                    document.querySelector('#modal-accept-btn').dataset.errorId = errorId;
                    document.querySelector('#modal-reject-btn').dataset.errorId = errorId;
                    
                    document.querySelector('#error-modal').classList.remove('hidden');
                }
            }

            // 关闭错误详情弹窗
            document.querySelector('#close-modal-btn').addEventListener('click', function() {
                document.querySelector('#error-modal').classList.add('hidden');
            });

            // 点击弹窗背景关闭
            document.querySelector('#error-modal .modal-overlay').addEventListener('click', function() {
                document.querySelector('#error-modal').classList.add('hidden');
            });

            document.querySelector('#export-modal .modal-overlay').addEventListener('click', function() {
                document.querySelector('#export-modal').classList.add('hidden');
            });

            // 接受修改按钮事件
            document.querySelector('#modal-accept-btn').addEventListener('click', function() {
                const errorId = this.dataset.errorId;
                acceptError(errorId);
                document.querySelector('#error-modal').classList.add('hidden');
            });

            // 拒绝修改按钮事件
            document.querySelector('#modal-reject-btn').addEventListener('click', function() {
                const errorId = this.dataset.errorId;
                rejectError(errorId);
                document.querySelector('#error-modal').classList.add('hidden');
            });

            // 错误列表中的接受/拒绝按钮
            document.querySelectorAll('.error-accept-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const errorId = this.dataset.errorId;
                    acceptError(errorId);
                });
            });

            document.querySelectorAll('.error-reject-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const errorId = this.dataset.errorId;
                    rejectError(errorId);
                });
            });

            // 接受错误修改
            function acceptError(errorId) {
                const errorHighlights = document.querySelectorAll(`[data-error-id="${errorId}"]`);
                errorHighlights.forEach(highlight => {
                    highlight.classList.add('error-resolved');
                    highlight.style.opacity = '0.6';
                });
                
                // 更新错误列表项样式
                const errorItem = document.querySelector(`#error-item-${errorId.split('-')[1]}`);
                if (errorItem) {
                    errorItem.style.opacity = '0.6';
                    errorItem.querySelector('.error-accept-btn').style.display = 'none';
                    errorItem.querySelector('.error-reject-btn').style.display = 'none';
                }
                
                updateProgress();
            }

            // 拒绝错误修改
            function rejectError(errorId) {
                const errorHighlights = document.querySelectorAll(`[data-error-id="${errorId}"]`);
                errorHighlights.forEach(highlight => {
                    highlight.style.backgroundColor = 'transparent';
                    highlight.style.borderColor = 'transparent';
                });
                
                // 更新错误列表项样式
                const errorItem = document.querySelector(`#error-item-${errorId.split('-')[1]}`);
                if (errorItem) {
                    errorItem.style.opacity = '0.6';
                    errorItem.querySelector('.error-accept-btn').style.display = 'none';
                    errorItem.querySelector('.error-reject-btn').style.display = 'none';
                }
                
                updateProgress();
            }

            // 更新进度
            function updateProgress() {
                const totalErrors = 12;
                const processedErrors = document.querySelectorAll('#error-list .error-accept-btn[style*="display: none"], #error-list .error-reject-btn[style*="display: none"]').length / 2;
                
                document.querySelector('#progress-text').textContent = `${processedErrors}/${totalErrors}`;
                document.querySelector('#bottom-toolbar .text-text-secondary').textContent = 
                    `已处理 ${processedErrors}/${totalErrors} 处错误`;
            }

            // 上一个/下一个错误按钮
            let currentErrorIndex = 0;
            const allErrors = document.querySelectorAll('.error-highlight');

            document.querySelector('#prev-error-btn').addEventListener('click', function() {
                if (currentErrorIndex > 0) {
                    currentErrorIndex--;
                    scrollToError(allErrors[currentErrorIndex]);
                }
            });

            document.querySelector('#next-error-btn').addEventListener('click', function() {
                if (currentErrorIndex < allErrors.length - 1) {
                    currentErrorIndex++;
                    scrollToError(allErrors[currentErrorIndex]);
                }
            });

            // 滚动到错误位置
            function scrollToError(errorElement) {
                errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
                errorElement.style.transform = 'scale(1.1)';
                setTimeout(() => {
                    errorElement.style.transform = 'scale(1)';
                }, 300);
            }
        });
    </script>
</body>
</html>